<template>
	<view :style="$theme.pageStyle">
		<view class="card-list">
			<view class="card-item" v-for="(item, index) in card" :key="index">
				<view class="card-item-inner" @click="ToUrl(item)">
					<view class="mask card" :style="{background: item.bgcolor}"></view>
					<span v-if="item.tag" class="source-tag" :style="{background: item.tag_bg, color: item.tag_color}">{{ item.tag }}</span>
					<h3 class="source-title" :style="{padding: item.tag ? '50rpx 0 20rpx 0' : '10rpx 0 20rpx 0'}">
						{{ item.name }}
					</h3>
						<view class="source-detail">
							{{ item.desc }}
						</view>
						<!-- <view v-if="item.img" class="img-layout">
							<image class="img" :src="item.img"></image>
						</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	
	export default {
		components: {
			
		},
		data() {
			return {
				card: [
					{
						tag: '最新',
						tagStyle: {
							bgColor: 'rgba(43, 164, 113, 0.1)',
							color: 'rgb(43, 164, 113)'
						},
						title: '劳动纠纷',
						subtitle: '拖欠薪资，解雇赔偿等案情结果一键预估',
						link:'/pages/index/index',
						// img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(8, 188, 47, 0.1) 0,rgba(242,78,30,0) 100%)'
					},
					{
						tag: '最火',
						tagStyle: {
							bgColor: 'rgba(239, 47, 47, 0.1)',
							color: 'rgb(239, 47, 47)'
						},
						title: '债券债务',
						subtitle: '债务纠纷等案情结果快速判断',
						link:'/pages/index/index',
						// img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						bgColor: 'radial-gradient(50% 50% at 50% 50%,rgba(242,78,30,.1) 0,rgba(242,78,30,0) 100%)'
					}
				]
			}
		},
		onLoad() {
			this.GetData()
		},
		methods: {
			GetData(){
				$H.post('index/CaseEvaluate', {
					
				}, {
					token: true
				}).then(res => {
					this.card = res.data
				})
			},
			
			ToUrl(item){
				if(item.is_open == 0){
					return uni.showToast({
						icon: 'none',
						title:'暂未开放！'
					})
				}
				uni.navigateTo({
					url:'/service/case/detail?id=' + item.id
				})
			}
		}
}
</script>

<style scoped>
	.card-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin: 30rpx;
	}
	.card-item {
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
	.card-item-inner {
		border: 1rpx solid rgb(236, 236, 236);
		background: rgb(249, 249, 251);
		border-radius: 9px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 16px;
	}
	.mask {
		border-radius: 100%;
		height: 600rpx;
		left: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		width: 600rpx;
		z-index: 10;
	}
	.mask.card {
		animation: maskRun 20s linear infinite;
	}
	.source-tag {
		border-bottom-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		left: 1rpx;
		padding: 12rpx 32rpx;
		position: absolute;
		top: 1rpx;
	}
	.source-detail {
		color: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
	}
	.img-layout {
		position: absolute;
		right: 14rpx;
		bottom: 14rpx;
	}
	.img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	@keyframes maskRun {
		0% {
			transform: translate3d(-25%,-25%,0);
		}
		25% {
				transform: translate3d(0,25%,0);
		}
		50% {
				transform: translate3d(60%,25%,0);
		}
		75% {
				transform: translate3d(60%,-25%,0);
		}
		100% {
				transform: translate3d(-25%,-25%,0);
		}
	}
</style>